<template>
  <view class="settings-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <view class="back-btn" @tap="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="page-title">设置</text>
    </view>

    <!-- 设置列表 -->
    <view class="settings-list">
      <!-- 通知设置 -->
      <view class="settings-section">
        <text class="section-title">通知设置</text>
        <view class="settings-item" @tap="navigateTo('/pages/settings/notification')">
          <view class="item-left">
            <text class="item-icon">🔔</text>
            <text class="item-text">消息通知</text>
          </view>
          <view class="item-right">
            <text class="item-arrow">></text>
          </view>
        </view>
      </view>

      <!-- 隐私设置 -->
      <view class="settings-section">
        <text class="section-title">隐私与安全</text>
        <view class="settings-item" @tap="navigateTo('/pages/security/security')">
          <view class="item-left">
            <text class="item-icon">🛡️</text>
            <text class="item-text">账号与安全</text>
          </view>
          <view class="item-right">
            <text class="item-arrow">></text>
          </view>
        </view>
        <view class="settings-item" @tap="navigateTo('/pages/password/password')">
          <view class="item-left">
            <text class="item-icon">🔐</text>
            <text class="item-text">修改密码</text>
          </view>
          <view class="item-right">
            <text class="item-arrow">></text>
          </view>
        </view>
      </view>

      <!-- 主题设置 -->
      <view class="settings-section">
        <text class="section-title">显示设置</text>
        <view class="settings-item">
          <view class="item-left">
            <text class="item-icon">🌙</text>
            <text class="item-text">夜间模式</text>
          </view>
          <view class="item-right">
            <switch :checked="isDarkMode" @change="toggleDarkMode" />
          </view>
        </view>
      </view>

      <!-- 关于 -->
      <view class="settings-section">
        <text class="section-title">关于</text>
        <view class="settings-item" @tap="navigateTo('/pages/settings/about')">
          <view class="item-left">
            <text class="item-icon">ℹ️</text>
            <text class="item-text">关于应用</text>
          </view>
          <view class="item-right">
            <text class="item-value">v1.0.0</text>
            <text class="item-arrow">></text>
          </view>
        </view>
      </view>

      <!-- 其他设置 -->
      <view class="settings-section">
        <text class="section-title">其他</text>
        <view class="settings-item" @tap="clearCache">
          <view class="item-left">
            <text class="item-icon">🗑️</text>
            <text class="item-text">清除缓存</text>
          </view>
          <view class="item-right">
            <text class="item-value">{{ cacheSize }}</text>
            <text class="item-arrow">></text>
          </view>
        </view>
        <view class="settings-item" @tap="checkUpdate">
          <view class="item-left">
            <text class="item-icon">⬆️</text>
            <text class="item-text">检查更新</text>
          </view>
          <view class="item-right">
            <text class="item-arrow">></text>
          </view>
        </view>
      </view>
    </view>

    <!-- 退出登录 -->
    <view class="logout-section">
      <button class="logout-btn" @tap="logout">退出登录</button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Settings',
  data() {
    return {
      isDarkMode: false,
      cacheSize: '12.5MB'
    }
  },
  onLoad() {
    // 获取当前主题模式
    this.isDarkMode = uni.getStorageSync('darkMode') || false;
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    
    navigateTo(path) {
      uni.navigateTo({
        url: path
      });
    },
    
    toggleDarkMode(e) {
      this.isDarkMode = e.detail.value;
      uni.setStorageSync('darkMode', this.isDarkMode);
      
      // 这里可以添加主题切换逻辑
      uni.showToast({
        title: this.isDarkMode ? '已开启夜间模式' : '已关闭夜间模式',
        icon: 'success'
      });
    },
    
    clearCache() {
      uni.showModal({
        title: '清除缓存',
        content: '确定要清除应用缓存吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除缓存逻辑
            uni.showLoading({
              title: '清除中...'
            });
            
            setTimeout(() => {
              uni.hideLoading();
              this.cacheSize = '0MB';
              uni.showToast({
                title: '缓存清除成功',
                icon: 'success'
              });
            }, 1000);
          }
        }
      });
    },
    
    checkUpdate() {
      uni.showLoading({
        title: '检查更新中...'
      });
      
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '当前已是最新版本',
          icon: 'success'
        });
      }, 2000);
    },
    
    logout() {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除所有本地存储数据
            uni.clearStorageSync();
            uni.reLaunch({
              url: '/pages/login/login'
            });
          }
        }
      });
    }
  }
}
</script>

<style>
.settings-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.page-header {
  background: #fff;
  padding: 20rpx 30rpx;
  padding-top: calc(20rpx + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #f0f0f0;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.back-icon {
  font-size: 36rpx;
  color: #333;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.settings-list {
  padding: 20rpx;
}

.settings-section {
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  display: block;
}

.settings-item {
  background: #fff;
  padding: 30rpx;
  margin-bottom: 2rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settings-item:first-of-type {
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
}

.settings-item:last-of-type {
  border-bottom-left-radius: 16rpx;
  border-bottom-right-radius: 16rpx;
  margin-bottom: 0;
}

.item-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.item-icon {
  font-size: 36rpx;
  margin-right: 24rpx;
}

.item-text {
  font-size: 30rpx;
  color: #333;
}

.item-right {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.item-value {
  font-size: 26rpx;
  color: #666;
}

.item-arrow {
  font-size: 24rpx;
  color: #999;
}

.logout-section {
  padding: 40rpx 20rpx;
  text-align: center;
}

.logout-btn {
  background: #FF4757;
  color: #fff;
  border: none;
  border-radius: 12rpx;
  padding: 24rpx 60rpx;
  font-size: 30rpx;
  width: 100%;
}

/* 夜间模式样式 */
.dark-mode .settings-container {
  background-color: #1a1a1a;
}

.dark-mode .page-header,
.dark-mode .settings-item {
  background: #2c2c2c;
}

.dark-mode .page-title,
.dark-mode .item-text {
  color: #e0e0e0;
}

.dark-mode .section-title,
.dark-mode .item-value {
  color: #b0b0b0;
}
</style>

